<template>
  <view class="container">
    <u-navbar
      title="资讯中心"
      :is-back="true"
    ></u-navbar>
    
    <view class="news-list">
      <view 
        class="news-item" 
        v-for="(item, index) in newsList" 
        :key="index"
        @click="goToDetail(item.id)"
      >
        <image class="news-image" :src="item.cover_image" mode="aspectFill"></image>
        <view class="news-content">
          <view class="news-title">{{ item.title }}</view>
          <view class="news-desc">{{ item.summary }}</view>
          <view class="news-footer">
            <text class="news-time">{{ item.create_time }}</text>
            <text class="news-views">{{ item.view_count }} 阅读</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <u-empty v-if="newsList.length === 0" mode="list" text="暂无资讯"></u-empty>
    
    <!-- 加载更多 -->
    <u-loadmore v-if="newsList.length > 0" :status="loadStatus" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      newsList: [],
      page: 1,
      size: 10,
      total: 0,
      loadStatus: 'loading' // loading, nomore, loadmore
    }
  },
  onLoad() {
    this.getNewsList()
  },
  methods: {
    // 获取资讯列表
    async getNewsList() {
      try {
        uni.showLoading({
          title: '加载中'
        })
        
        const res = await this.$api.getNewsList({
          page: this.page,
          size: this.size
        })
        
        uni.hideLoading()
        
        if (res.data && res.data.code === 200) {
          const { rows, count } = res.data.data
          
          this.newsList = this.page === 1 ? rows : [...this.newsList, ...rows]
          this.total = count
          
          // 更新加载状态
          if (this.newsList.length >= this.total) {
            this.loadStatus = 'nomore'
          } else {
            this.loadStatus = 'loadmore'
          }
        }
      } catch (error) {
        uni.hideLoading()
        console.error('获取资讯列表失败', error)
        uni.showToast({
          title: '获取资讯列表失败',
          icon: 'none'
        })
      }
    },
    
    // 跳转到详情页
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/news/detail?id=${id}`
      })
    },
    
    // 上拉加载更多
    onReachBottom() {
      if (this.loadStatus === 'nomore') return
      
      this.page++
      this.loadStatus = 'loading'
      this.getNewsList()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.news-list {
  padding: 20rpx;
}

.news-item {
  display: flex;
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.news-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-footer {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}
</style>
